<template>
	<div class="race-index">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
			<el-form-item prop="name" label="赛事名称">
				<el-input style="width: 500px;" v-model="ruleForm.name" placeholder="请输入赛事名称"></el-input>
			</el-form-item>
			<el-form-item prop="name" label="赛事描述">
				<el-input type="textarea" :rows="3" style="width: 500px;" v-model="ruleForm.raceDesc"
					placeholder="请输入赛事描述"></el-input>
			</el-form-item>
			<el-form-item prop="dateRange" label="赛事时间">
				<el-date-picker style="width: 500px;" v-model="ruleForm.dateRange" type="datetimerange"
					range-separator="至" start-placeholder="赛事开始时间" end-placeholder="赛事结束时间"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item prop="signUpDateRange" label="报名时间">
				<el-date-picker style="width: 500px;" v-model="ruleForm.signUpDateRange" type="datetimerange"
					range-separator="至" start-placeholder="报名开始时间" end-placeholder="报名结束时间"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item prop="racePosterUrl" label="赛事海报">
				<el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="ruleForm.racePosterUrl" :src="ruleForm.racePosterUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item prop="competitionOrganize" label="赛事组委会">
				<el-input type="textarea" :rows="2" style="width: 500px;" v-model="ruleForm.competitionOrganize"
					placeholder="请输入赛事组委会"></el-input>
			</el-form-item>
			<el-form-item prop="promotionalVideo" label="大赛宣传视频">
				<el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
					:on-success="handleVideoAvatarSuccess" :before-upload="beforeAvatarUpload">
					<video v-if="ruleForm.promotionalVideo" :src="`${ruleForm.promotionalVideo}`" class="avatar">
						您的浏览器不支持视频播放
					</video>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="是否需要上传附件" prop="isNeedAttachments">
				<el-switch v-model="ruleForm.isNeedAttachments"></el-switch>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="资源类型限制" prop="resourceTypeLimitArray">
						<el-select style="width: 220px;" v-model="ruleForm.resourceTypeLimitArray"
							placeholder="请选择资源类型限制" clearable multiple>
							<el-option :label="item.label" :value="item.value" v-for="item in typeOptions"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否支持团体报名" prop="isSupportGroup">
						<el-switch v-model="ruleForm.isSupportGroup"></el-switch>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item prop="resourceSizeLimit" label="资源大小上传限制(MB)">
						<el-input style="width: 220px;" v-model="ruleForm.resourceSizeLimit"
							placeholder="请输入资源大小上传限制(MB)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="resourceUploadQuantity" label="资源上传数量限制">
						<el-input style="width: 220px;" v-model="ruleForm.resourceUploadQuantity"
							placeholder="请输入资源上传数量限制"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-form-item label="是否需要审核" prop="isAudit">
				<el-switch v-model="ruleForm.isAudit"></el-switch>
			</el-form-item>
			<el-form-item label="审核人员" prop="sex" v-if="ruleForm.isAudit">
				<el-select style="width: 500px;" v-model="ruleForm.sex" placeholder="请选择性别">
					<el-option :label="item.label" :value="item.value" v-for="item in sexOptions"></el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="是否需要缴费" prop="isRequiredPay">
				<el-switch v-model="ruleForm.isRequiredPay"></el-switch>
			</el-form-item>
			<el-row>
				<el-col :span="8">
					<el-form-item label="缴费金额(元)" prop="payPrice" v-if="ruleForm.isRequiredPay">
						<el-input style="width: 170px;" v-model="ruleForm.payPrice" placeholder="请输入缴费金额(元)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item prop="payDateRange" label="缴费时间" v-if="ruleForm.isRequiredPay">
						<el-date-picker style="width: 380px;" v-model="ruleForm.payDateRange" type="datetimerange"
							range-separator="至" start-placeholder="缴费开始时间" end-placeholder="缴费结束时间"
							value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-form-item label="分组设置" prop="groups">
				<el-tag style="margin-right: 10px;" v-for="tag in ruleForm.groups" :key="tag.name" closable
					@close="handleClose(tag)">
					{{tag}}
				</el-tag>
				<el-input style="width: 100px;" size="small" v-model="tag" @blur="handleGroup"
					placeholder="请输入分组"></el-input>
			</el-form-item> -->
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="分组设置" prop="resourceTypeLimitArray">
						<el-button size="mini" type="primary" @click="dialogVisible = true">分组管理</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="奖项设置" prop="isSupportGroup" >
						<el-button size="mini" type="primary">奖项管理</el-button>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-form-item label="赛事须知" prop="raceNotice">
				<editor style="width: 500px;" :width="600" :height="300" v-model="ruleForm.raceNotice"
					placeholder="请输入赛事须知"></editor>
				<!-- <el-input style="width: 500px;" v-model="ruleForm.raceNotice" placeholder="请输入赛事须知"></el-input> -->
			</el-form-item>
			<el-form-item label="赛事计划" prop="racePlan">
				<!-- <el-input style="width: 500px;" v-model="ruleForm.racePlan" placeholder="请输入赛事计划"></el-input> -->
				<editor style="width: 500px;" :width="600" :height="300" v-model="ruleForm.racePlan"
					placeholder="请输入赛事计划"></editor>
			</el-form-item>
		</el-form>
		<div style="text-align: center;margin-top: 10px;">
			<el-button type="primary" @click="go2Submit">{{ruleForm.id ? "立即更新" : "立即创建"}}</el-button>
			<el-button @click="go2Cancel">取消</el-button>
		</div>
	</div>
</template>

<script>
	import Editor from '@/components/Editor/index.vue'

	import {
		create,
		update
	} from '@/api/meiyu/race.js'
	import {
		getToken
	} from '@/utils/auth'

	export default {
		components: {
			Editor
		},
		props: {
			originData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				dialogVisible: false,
				action: "/api/v0.1/common/upload",
				headers: {
					Authorization: getToken()
				},
				tag: "",
				ruleForm: {
					name: '',
					raceDesc: "",
					racePosterUrl: "",
					dateRange: [],
					payDateRange: [],
					signUpDateRange: [],
					isAudit: false,
					isRequiredPay: false,
					payPrice: "",
					raceNotice: '',
					racePlan: "",
					groups: [],
					resourceTypeLimit: "",
					resourceTypeLimitArray: [],
					resourceSizeLimit: "",
					resourceUploadQuantity: "",
					isSupportGroup: false,
					promotionalVideo: "",
					competitionOrganize: "",
					isNeedAttachments: false
				},
				typeOptions: [{
					label: "PNG",
					value: "png"
				}, {
					label: "JPG",
					value: "jpg"
				}, {
					label: "JPEG",
					value: "jpeg"
				}, {
					label: "GIF",
					value: "gif"
				}, {
					label: "SVG",
					value: "svg"
				}],
				rules: {
					name: [{
						required: true,
						message: '请输入赛事名称',
						trigger: 'blur'
					}],
					competitionOrganize: [{
						required: true,
						message: '请输入赛事组委会',
						trigger: 'blur'
					}],
					dateRange: [{
						required: true,
						message: '请选择赛事时间',
						trigger: 'change'
					}],
					raceNotice: [{
						required: true,
						message: '请输入赛事须知',
						trigger: 'change'
					}],
					racePlan: [{
						required: true,
						message: '请输入赛事计划',
						trigger: 'blur'
					}],
					groups: [{
						required: true,
						message: '请设置分组',
						trigger: 'blur'
					}],
					racePosterUrl: [{
						required: true,
						message: '请上传海报',
						trigger: 'change'
					}],
					signUpDateRange: [{
						required: true,
						message: '请选择报名时间',
						trigger: 'blur'
					}],
					resourceTypeLimit: [{
						required: true,
						message: '请选择资源上传类型限制',
						trigger: 'blur'
					}],
					resourceSizeLimit: [{
						required: true,
						message: '请输入资源上传大小限制',
						trigger: 'blur'
					}],
					resourceUploadQuantity: [{
						required: true,
						message: '请输入资源上传数量限制',
						trigger: 'blur'
					}],
				},
				loading: ""
			}
		},
		mounted() {
			this.action = process.env.VUE_APP_UPLOAD_HOST + this.action
			if (Object.keys(this.originData).length > 0) {
				this.ruleForm = {
					...this.originData,
					dateRange: [this.originData.startTime, this.originData.endTime],
					payDateRange: [this.originData.payStartTime, this.originData.payEndTime],
					signUpDateRange: [this.originData.signUpStartTime, this.originData.signUpEndTime],
					resourceTypeLimitArray: this.originData.resourceTypeLimit ? this.originData.resourceTypeLimit
						.split(",") : []
				}
			}
		},
		methods: {
			handleAvatarSuccess(response, file, fileList) {
				this.loading.close()
				if (response.code !== 200) {
					this.$message.error(response.msg || "上传失败")
				} else {
					this.$message.success("上传成功")
					this.ruleForm.racePosterUrl = response.msg
				}
			},
			handleVideoAvatarSuccess(response, file, fileList) {
				this.loading.close()
				if (response.code !== 200) {
					this.$message.error(response.msg || "上传失败")
				} else {
					this.$message.success("上传成功")
					this.ruleForm.promotionalVideo = response.msg
				}
			},
			beforeAvatarUpload(file) {
				this.loading = this.$loading({
					lock: true,
					text: '上传中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			},
			handleClose(tag) {
				this.ruleForm.groups.splice(this.ruleForm.groups.indexOf(tag), 1)
			},
			handleGroup() {
				if (!this.tag) {
					return
				}
				if (this.ruleForm.groups.length === 5) {
					this.$message.warning('分组最多设置5个')
					return
				}
				this.ruleForm.groups.push(this.tag)
				this.tag = ""
			},
			go2Submit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						if (this.ruleForm.id) {
							// 更新操作
							let req = {
								...this.ruleForm,
								payPrice: this.ruleForm.payPrice ? this.ruleForm.payPrice : null,
								startTime: this.ruleForm.dateRange[0],
								endTime: this.ruleForm.dateRange[1],
								payStartTime: this.ruleForm.payDateRange[0],
								payEndTime: this.ruleForm.payDateRange[1],
								signUpStartTime: this.ruleForm.signUpDateRange[0],
								signUpEndTime: this.ruleForm.signUpDateRange[1],
								resourceTypeLimit: this.ruleForm.resourceTypeLimitArray.join(",")
							}
							update(this.ruleForm.id, req).then((res) => {
								if (res.code === 200) {
									const message = res.message
									this.$message.success('更新成功')
									this.go2Cancel()
								} else {
									this.$message.error(res.msg || '更新失败')
								}
							}).catch((error) => {
								console.log(error)
							}).finally(() => {
								loading.close()
							})
						} else {
							// 添加操作
							let req = {
								...this.ruleForm,
								payPrice: this.ruleForm.payPrice ? this.ruleForm.payPrice : null,
								startTime: this.ruleForm.dateRange[0],
								endTime: this.ruleForm.dateRange[1],
								payStartTime: this.ruleForm.payDateRange[0],
								payEndTime: this.ruleForm.payDateRange[1],
								signUpStartTime: this.ruleForm.signUpDateRange[0],
								signUpEndTime: this.ruleForm.signUpDateRange[1],
								resourceTypeLimit: this.ruleForm.resourceTypeLimitArray.join(",")
							}
							create(req).then((res) => {
								if (res.code === 200) {
									const message = res.message
									this.$message.success('新增成功')
									this.go2Cancel()
								} else {
									this.$message.error(res.msg || '新增失败')
								}
							}).catch((error) => {
								console.log(error)
							}).finally(() => {
								loading.close()
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			go2Cancel() {
				this.$emit('close')
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
	}
</script>

<style lang="scss">
	.race-index {
		padding: 15px;

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style>